<template>
    <el-table :data="state.week_data" height="700" 
    :default-sort="state.sort"
    @sort-change="sortChange"
    @cell-click="cellClick"
    :cell-class-name="tableCellClassName"
    style="width: 100%">
        <el-table-column prop="date" label="日期" sortable width="230" />
        <el-table-column prop="close" label="价格"/>
        <el-table-column label="display" width="100">
            <template #default="scope">
                <ToDisplay :stock="state.stock" :date="scope.row.date" />
            </template>
        </el-table-column>
        <el-table-column prop="gb15w" label="gb15w"/>
        <el-table-column prop="gb20w" label="gb20w"/>
        <el-table-column prop="gb30w" label="gb30w"/>
        <el-table-column prop="gb60w" label="gb60w"/>
        <el-table-column prop="weekPct" label="周涨跌" sortable/>
        <el-table-column prop="lp" label="分位点" sortable/>
        <el-table-column prop="disPct" label="disPct" sortable/>
        <el-table-column prop="duration" label="duration" sortable/>
    </el-table>
</template>

<script setup>
// 个股周数据详情页
import { reactive, watch } from 'vue';
import { weekStockSearch } from '../stores/week'
import { storeToRefs } from 'pinia';
import { useRoute } from 'vue-router'
import { getGB60WStaData } from '../service/gbSta';
import { getLpClassName } from '../utils/help';
import ToDisplay from './element/ToDisplay.vue';


const base = "weekStockYearLineHistory"
const sortPropKey = base + "SortProp"
const sortOrderKey = base + "SortOrder"

const stockSearchStore = weekStockSearch()
let { input } = storeToRefs(stockSearchStore)

// 网址传参
const {query: query} = useRoute()
if(query.stock) {
    input.value = query.stock
}

const state = reactive({
    stock: "",
    weekPctSelected:   "",
    raw_data: [],
    week_data: [],
    sort: { 
        prop: sessionStorage.getItem(sortPropKey) || 'date' , 
        order: sessionStorage.getItem(sortOrderKey) || 'descending' 
    }
})


// 只监听pinia中某一个值的变化
watch(() => input.value, (newValue, oldValue) => {
    loadData()
})

const loadData = () => {
    state.stock = input.value
    getGB60WStaData(input.value).then(res => {
        state.raw_data = res.data
        state.week_data = res.data
    })
}

loadData()

const sortChange = (column, prop, order) => {
    sessionStorage.setItem(sortPropKey, column.prop)
    sessionStorage.setItem(sortOrderKey, column.order)
}

const cellClick = (row, column, cell, event) => {
    var columnProperty = column.property
    if (columnProperty == 'weekPct') {
        if (state.weekPctSelected != "") {
            state.weekPctSelected = ""
            state.week_data = state.raw_data
        } else {
            if (row[columnProperty] >=0) {
                state.weekPctSelected = "up"
                state.week_data = state.raw_data.filter(item => item.weekPct >=0)
            } else {
                state.weekPctSelected = "down"
                state.week_data = state.raw_data.filter(item => item.weekPct < 0)
            }
        }
    }
}

const tableCellClassName = ({row, column, rowIndex, columnIndex}) => {
    var columnProperty = column.property

    if (columnProperty == "lp") {
        return getLpClassName(row[columnProperty])
    }

    if (columnProperty == "duration") {
        if ([1,2].includes(row[columnProperty])) {
            return 'd300up-cell'
        }
        return ""
    }

    if (columnProperty == "close") {
        return ""
    }

    if (["gb15w","gb20w","gb30w"].includes(columnProperty)) {
        if (row[columnProperty] > row["close"]) {
            return "lt0-cell"
        }
        return ""
    }

    if (row['disPct'] < 0) {
        return 'd300down-cell'
    }
    return ''
}
</script>